<script setup lang="ts">

import * as THREE from "three"
import {onMounted} from "vue";
import {OrbitControls} from "three/examples/jsm/controls/OrbitControls";
import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader";
import {Group} from "three";
import GUI from "three/examples/jsm/libs/lil-gui.module.min";

onMounted(() => {

  const scene = new THREE.Scene();
  const camera = new THREE.PerspectiveCamera(75, document.getElementById("scene").offsetWidth / document.getElementById("scene").offsetHeight, 0.1, 1000)
  const render = new THREE.WebGLRenderer({
    antialias: true,
    alpha: true
  });
  render.setSize(document.getElementById("scene").offsetWidth, document.getElementById("scene").offsetHeight)
  render.shadowMap.enabled = true
  document.getElementById("scene").appendChild(render.domElement)

  camera.position.set(-1, 2, 8);

  const grid = new THREE.GridHelper(10)
  // scene.add(grid)

  const control = new OrbitControls(camera, render.domElement);
  control.update();

  const am = new THREE.AmbientLight("#fff", 2);
  scene.add(am)
  control.target.y = -0.5
  control.enabled = false


  const box = new THREE.Mesh(new THREE.BoxGeometry(1.5, 1.5, 1.5), new THREE.MeshStandardMaterial({color: "#38f"}))
  scene.add(box)


  const gltfLoader = new GLTFLoader();
  let obj: Group | null = null;
  gltfLoader.load("/xxxxx.glb", gltf => {
    obj = gltf.scene;
    scene.add(gltf.scene)
    gltf.scene.traverse(node => {
      // console.log(node)
    })
  })

  const light = new THREE.DirectionalLight("#fff", 1)
  light.castShadow = true;
  light.position.set(0, 500, 0)

  // 配置阴影相机

  scene.add(light)

  const chelper = new THREE.CameraHelper(light.shadow.camera);
  // scene.add(chelper)

  const h = new THREE.DirectionalLightHelper(light);
  // scene.add(h);

  // 创建dat.GUI界面
  //   const gui = new GUI();
  //   const cameraFolder = gui.addFolder('Camera Position');
  //   cameraFolder.add(camera.position, "x", -100, 100);
  //   cameraFolder.add(camera.position, 'y', -100, 100);
  //   cameraFolder.add(camera.position, 'z', -100, 100);
  //   cameraFolder.open();

  const fn = () => {
    requestAnimationFrame(fn)
    render.render(scene, camera);
    control.update()

  }
  fn();
  const maxYRotation = 2 * Math.PI;
  document.getElementById("scroll").addEventListener("scroll", (e: Event) => {
    const target = e.target as HTMLElement;
    const p = target.scrollTop / (target.scrollHeight - window.innerHeight);
    document.getElementById("scroll2").scrollTop = target.scrollTop;
    if (obj) {
      obj.rotation.y = maxYRotation * p;
      const scale = 1 + (maxYRotation * p * 0.05)

      obj.scale.set(scale, scale, scale)
    }
  })

})

</script>

<template>
  <div style="height: 100%;overflow: hidden">
    <div id="scene" style="position: absolute;top:0;left:0;z-index:9"></div>

    <div id="scroll2" style="position: absolute;width: 100%; height: 100%;left:0;top:0;overflow: auto;z-index: 1">
      <div style="height: 400vh;font-size:30px;letter-spacing: 50px;padding-left: 50px;line-height: 180px;">

        <div style="height: 100vh;
        font-weight: bold;color:rgb(27, 90, 212);
        display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <h1>THIS</h1>
          <h1>IS A</h1>
          <h1>DEMO</h1>
        </div>
        <div style="height: 100vh;
        font-weight: bold;color:rgb(27, 90, 212);
        display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <h1>1</h1>
        </div>
        <div style="height: 100vh;
        font-weight: bold;color:rgb(27, 90, 212);
        display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <h1>2</h1>
        </div>
        <div style="height: 100vh;
        font-weight: bold;color:rgb(27, 90, 212);
        display: flex;flex-direction: column;align-items: center;justify-content: center;">
          <h1>3</h1>
        </div>
      </div>
    </div>

    <div id="scroll" style="position: absolute;width: 100%; height: 100%;left:0;top:0;overflow: auto;z-index: 10">
      <div style="height: 400vh">

      </div>
    </div>

  </div>
</template>

<style scoped>
#app {
  width: 100%;
  height: 100%;
}

#scene {
  width: 100%;
  height: 100vh;
}
</style>
